[Cascading Style Sheets]
[Previous page] [Next page] [Section contents page]
Sample Style Sheet

Below are the complete contents of the stylesheets.css (for IE 4.0x), stylesheets3.css (for IE 3.0x), and n_stylesheets.css (for Netscape) files used as the alternative style sheets for this section. I include them here samples you can study and experiment with in your own style sheet development.

Internet Explorer 4.0 Version 
.black
{		
	color: black;
	}

.blue
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 12pt;
	color: #990000;
	background: #CCFFFF;
	position: relative;
	}

.blue2
{		
	color: blue;
	}

.brown
{		
	color: #993300;
	}

.dropshadow
{
	font: Bold x-large 'Arial', 'sans-serif';
	position:relative;
	top:0;
	left:0;
	width:auto;
	height:auto;
	filter:dropshadow(color=#483D8B,OffX=3,OffY=3,Positive=1);
	}

.dropshadow1
{		
	font: Bold x-large 'Arial', 'sans-serif';
	color: #FFFFCC;
	filter: DropShadow(Color=#669999,OffX=-3,OffY=-3,Positive=0);
	width: auto;
	height: auto;
	position: relative;
	}

.first
{		
	border-top-width: thin;
	border-left-width: thin;
	border-left-color: #66CC99;
	border-top-color: #66CC99;
	border-top-style: outset;
	border-left-style: inset;
	padding-top: 2pt;
	padding-left: 2pt;
	}

.float
{		
	width: 40%;
	text-align: left;
	float: right;
	font-size: 10pt;
	color: #006600;
	background: #FFFFFF;
	position: relative;
	padding: 4pt 4pt;
	border-width: thin;
	border-style: groove;
	}

.fuchsia
{		
	color: fuchsia;
	}

.glow
{		
	font: Bold x-large 'Arial', 'sans-serif';
	color: #CC6699;
	filter: glow(Color=#FFFF00,Strength=5);
	width: auto;
	height: auto;
	position: relative;
	left: 0;
	top: 0;
	}

.gray
{		
	color: gray;
	}

.green
{		
	color: green;
	}

.hugeding
{		
	font: 80pt 'Wingdings', 'fantasy';
	color: #FFFF99;
	position: relative;
	}

.indent
{		
	margin-left: 1cm;
	position: relative;
	}

.large
{		
	font-family: 'Arial', 'Sans-Serif';
	font-style: italic;
	font-weight: bold;
	font-size: 16pt;
	color: #660066;
	text-align: left;
	position: relative;
	}

.lime
{		
	color: lime;
	}

.maroon
{		
	color: maroon;
	}

.navy
{		
	color: navy;
	}

.noindent
{
	margin-left: 0;
	position: relative;
	}

.note
{		
	font-size: 10pt;
	color: #006600;
	background: #FFFFFF;
	position: relative;
	padding: 2pt 2pt;
	border-width: thin;
	border-style: groove;
	}

.olive
{		
	color: olive;
	}

.purple
{		
	color: purple;
	}

.red
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: normal;
	font-size: 8pt;
	color: #FF0000;
	text-align: center;
	position: relative;
	}

.red2
{		
	color: red;
	}

.redleft
{		
	font-family: 'Arial', 'Sans-Serif';
	font-size: 9pt;
	color: #990000;
	text-align: left;
	position: relative;
	}

.shadow
{		
	font: Bold x-large 'Verdana', 'Arial', 'Sans-Serif';
	color: #9999ff;
	filter: shadow(Color=#330066,Direction=135);
	padding: 5pt 12pt;
	height: 60;
	position: relative;
	left: 0;
	top: 0;
	}

.shadow3
{		
	font: Bold x-large 'sans-serif';
	color: #339999;
	position: absolute;
	left: 10pt;
	top: 30pt;
	z-index: 3;
	}

.small
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: normal;
	font-size: 8pt;
	text-align: center;
	}

.teal
{		
	color: teal;
	}

A:active
{		
	color: #FF0000;
	}

B
{		
	color: #990000;
	position: relative;
	}

BLOCKQUOTE
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	position: relative;
	margin-left: 2cm;
	}

CAPTION
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 10pt;
	color: #000066;
	margin-left: .1in;
	position: relative;
	}

DD
{		
	font: Bold 11pt 'Trebuchet MS', 'Arial', 'sans-serif';
	color: navy;
	position: relative;
	left: .5cm;
	}

DIV
{		
	position: relative;
	}

DT
{		
	font: Bold large 'Arial', 'sans-serif';
	color: teal;
	background: #FFFFCC;
	padding-left: 2pt;
	position: relative;
	left: .5cm;
	}

H1
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: xx-large;
	color: #996699;
	text-align: Left;
	position: relative;
	filter: shadow(color=#660099,OffX=6,OffY=6,Positive=1) ;
	}

H2
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: x-large;
	color: #660066;
	text-align: Center;
	position: relative;
	}

H3
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: large;
	color: #ffff66;
	background: #996699;
	padding-left: 2pt;
	position: relative;
	}

H4
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #660066;
	background: #FFFFCC;
	margin-left: .5cm;
	padding-left: 2pt;
	width: auto;
	height: auto;
	position: relative;
	left: auto;
	top: auto;
	}

H5
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: small;
	color: #660066;
	background: #99cccc;
	margin-left: .7cm;
	padding-left: 5pt;
	position: relative;
	}

H6
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: small;
	color: #660066;
	margin-left: 1cm;
	padding-left: 10pt;
	position: relative;
	}

I
{		
	color: #000099;
	position: relative;
	}

LI
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	margin-left: .4cm;
	position: relative;
	}

OL
{		
	position: relative;
	margin-left: 1.5cm;
	}

P
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	margin-left: 1cm;
	position: relative;
	}

PRE
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 10pt;
	color: #990000;
	text-align: left;
	margin-left: 1cm;
	position: relative;
	}

TABLE
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #006600;
	position: relative;
	}

TD
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	position: relative;
	}

TH
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 12pt;
	color: #990000;
	background: #CCCC99;
	position: relative;
	}

TR
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	position: relative;
	}

UL
{		
	position: relative;
	margin-left: 1.5cm;
		}
Internet Explorer 3.0 Version 
.black
{		
	color: black;
	}

.blue2
{		
	color: blue;
	}

.brown
{		
	color: #993300;
	}

.fuchsia
{		
	color: fuchsia;
	}

.gray
{		
	color: gray;
	}

.green
{		
	color: green;
	}

.indent
{ margin-left: 1cm }

.large
{		
	font-family: "'Arial', 'Sans-Serif'";
	font-style: italic;
	font-weight: bold;
	font-size: 16pt;
	color: #660066;
	text-align: left;
	margin-left: 1cm;
	}

.lime
{		
	color: lime;
	}

.maroon
{		
	color: maroon;
	}

.navy
{		
	color: navy;
	}

.noindent
{
	margin-left: 0;
	position: relative;
	}

.note
{		
	font-size: 10pt;
	color: #006600;
	background: #FFFFFF;
	}

.olive
{		
	color: olive;
	}

.purple
{		
	color: purple;
	}

.red
{		
	font-family: "'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 8pt;
	color: #FF0000;
	text-align: center;
	}

.red2
{		
	color: red;
	}

.redleft
{		
	font-family: "'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 9pt;
	color: #990000;
	text-align: left;
	}

.shadow
{		
	font-family: " 'Trebuchet MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 30pt;
	color: #9999FF;
	text-align: left;
	
	}

.shadow3
{		
	font-family: " 'Trebuchet MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 30pt;
	color: #336666;
	text-align: left;
	margin-top: -70pt;
	margin-left: 38pt;
	}

.small
{		
	font-family: "'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 8pt;
	text-align: center;
	}

.teal
{		
	color: teal;
	}

A:active
{		
	color: #FF0000;
	}

B
{		
	color: #990000;
	}

BLOCKQUOTE
{		
	font-family: " 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	margin-left: 2cm;
	}

CAPTION
{		
	font-family: "'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 10pt;
	color: #000066;
	margin: .1in;
	}

DD
{		
	font: Bold medium 'Trebuchet MS', 'Arial', 'sans-serif';
	color: navy;
	position: relative;
	left: .5cm;
	}

DT
{		
	font: Bold large 'Arial', 'sans-serif';
	color: teal;
	background: #FFFFCC;
	padding: 2pt;
	position: relative;
	left: .5cm;
	}

H1
{		
	font-family: " 'Trebuchet MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: xx-large;
	color: #660066;
	padding: 2pt;
	}

H2
{		
	font-family: "'Trebuchet MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: x-large;
	color: #660066;
	padding: 2pt;
	}

H3
{		
	font-family: " 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: large;
	color: #660066;
	background: #FFFFCC;
	padding: 2pt;
	}

H4
{		
	font-family: " 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: medium;
	color: #660066;
	background: #999966;
	margin-left: .5cm;
	padding: 2pt;
	}

H5
{		
	font-family: " 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: small;
	color: #660066;
	background: #99cccc;
	margin-left: .5cm;
	padding: 2pt;
	}

H6
{		
	font-family: " 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: small;
	color: #660066;
	margin-left: 1cm;
	padding: 2pt;
	}

I
{		
	color: #000099;
	}

LI
{		
	font-family: "'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	}

OL
{		
	margin-left: 1.5cm;
	}

P
{		
	font-family: "'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	margin-left: 1cm;
	}

P.hugeding
{		
	font: 80pt 'Wingdings', 'fantasy';
	color: #FFFF99;
	}

TD
{		
	font-family: "'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	}

TH
{		
	font-family: "'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 12pt;
	color: #990000;
	background: #CCCC99;
	}

TH.blue
{		
	font-family: "'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 12pt;
	color: #990000;
	background: #CCFFFF;
	}

UL
{		
	margin-left: 1.5cm;
	}

XMP
{		
	font-family: "'Arial', 'Sans-Serif'";
	font-weight: bold;
	font-size: 10pt;
	color: #990000;
	text-align: left;
	}

PRE
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 12pt;
	color: #990000;
		}
Netscape Communicator 4.0 Version 
#layer1
{		
	position: relative;
	}

#layer3
{		
	position: absolute;
	left: 40pt;
	top: 30pt;
	}

.black
{		
	color: black;
	}

.blue
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	color: #990000;
	background: #CCFFFF;
	}

.blue2
{		
	color: blue;
	}

.brown
{		
	color: #993300;
	}

.first
{		
	padding-top: 2pt;
	padding-left: 2pt;
	border-top-width: thin;
	border-left-width: thin;
	border-left-color: #66CC99;
	border-top-color: #66CC99;
	border-top-style: outset;
	border-left-style: inset;
	}

.fuchsia
{		
	color: fuchsia;
	}

.gray
{		
	color: gray;
	}

.green
{		
	color: green;
	}

.hugeding
{		
	font: 80pt 'Wingdings', 'fantasy';
	color: #FFFF99;
	position: relative;
	}

.indent
{		
	margin-left: 1cm;
	}

.large
{		
	font-family: 'Trebuchet MS', 'Arial', 'sans serif';
	font-style: bold;
	font-weight: bold;
	font-size: 18pt;
	color: #999999;
	text-align: left;
	margin-top: .4cm;
	margin-left: .02cm;
	}

.lime
{		
	color: lime;
	}

.maroon
{		
	color: maroon;
	}

.navy
{		
	color: navy;
	}

.noindent
{		
	margin-left: 0;
	position: relative;
	}

.note
{		
	font-size: small;
	color: #006600;
	background: #FFFFFF;
	border: thin #006600 ridge;
	}

.olive
{		
	color: olive;
	}

.purple
{		
	color: purple;
	}

.red
{		
	font-family: 'Trebuchet MS', 'Verdana', 'Arial', 'Sans-Serif';
	font-weight: normal;
	font-size: small;
	color: #FF0000;
	text-align: center;
	}

.red2
{		
	color: red;
	}

.redleft
{		
	font-family: 'Trebuchet MS', 'Verdana', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 9pt;
	color: #990000;
	text-align: left;
	}

.shadow
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: xx-large;
	color: #9966FF;
	text-align: left;
	}

.shadow3
{		
	font: Bold x-large 'sans-serif';
	color: #339999;
	position: absolute;
	}

.small
{		
	font-family: 'Trebuchet MS', 'Verdana', 'Arial', 'Sans-Serif';
	font-weight: normal;
	font-size: small;
	text-align: center;
	}

.teal
{		
	color: teal;
	}

A:active
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #FF0000;
	}

A:link
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #0000FF;
	}

A:visited
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #990099;
	}

BLOCKQUOTE
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	margin-left: 2cm;
	position: relative;
	}

CAPTION
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: small;
	color: #000066;
	margin: .1in;
	}

DD
{		
	font: Bold medium 'Trebuchet MS', 'Arial', 'sans-serif';
	color: navy;
	position: relative;
	left: .5cm;
	}

DT
{		
	font: Bold large 'Arial', 'sans-serif';
	color: teal;
	background: #FFFFCC;
	padding: 2pt;
	position: relative;
	left: .5cm;
	}

EM
{		
	color: #000099;
	}

H1
{		
	font-family: 'Trebuchet MS', 'Arial', 'Sans-Serif';
	font-style: bold;
	font-weight: bold;
	font-size: xx-large;
	color: #666666;
	text-align: left;
	position: relative;
	}

H2
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: x-large;
	color: #660066;
	}

H3
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: large;
	color: #660066;
	}

H4
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: medium;
	color: #660066;
	}

H5
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: medium;
	color: #660066;
	}

LI
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	}

OL
{		
	margin-left: 1.5cm;
	}

P
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	margin-left: 1cm;
	}

PRE
{		
	font-family: 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 10pt;
	color: #990000;
	text-align: left;
	margin-left: 1cm;
	position: relative;
	}

STRONG
{		
	color: #990000;
	}

TABLE
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #006600;
	}

TD
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	}

TH
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: large;
	color: #990000;
	background: #CCCC99;
	}

TR
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	color: #000066;
	}

UL
{		
	font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
	font-weight: bold;
	font-size: 11pt;
	margin-left: 1.5cm;
		}
[Previous page] [Next page] [Section contents page]